<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #das {
        width: 600px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <script src="../lib/echarts.min.js"></script>

    <div id="das"></div>
    <script src="./js/echarts.min.js"></script>
    <script>
      const das = echarts.init(document.querySelector('#das'))
      option = {
        title: {
          text: '吴总',
          subtext: '12组',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        //上面的颜色选择
        // legend: {
        //   data: ['Forest', 'Steppe']
        // },
        //右侧栏-柱状体形态切换
        // toolbox: {
        //   show: true,
        //   orient: 'vertical',
        //   left: 'right',
        //   top: 'center',
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        xAxis: [
          {
            type: 'category',
            //X轴左右端样式
            // axisTick: { show: false },
            data: ['一', '二', '三', '四', '五', '六', '七'],
            //设置x轴虚线
            axisLine: {
              lineStyle: {
                type: 'dashed',
              },
            },
            //x轴底部字体颜色
            axisLabel: {
              color: 'red',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              type: 'dashed',
              color: '#d4d4d6',
            },
            //Y轴轴度线，虚线
            splitLine: {
              lineStyle: {
                type: 'dashed',
              },
            },
          },
        ],
        color: [
          // 渐变
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#8acdea', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#fdc0cb', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: '#ffb0bb', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#ff0000', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
        series: [
          {
            name: '左',
            type: 'bar',
            //清除柱形图直接的间距
            // barGap: 0,
            //鼠标焦点时，强调鼠标在的那个柱状图
            // emphasis: {
            //   focus: 'series'
            // },
            data: [50, 70, 100, 150, 175, 166, 40],
            //柱状图灰色背景色
            showBackground: true,
          },
          {
            name: '右',
            type: 'bar',
            //鼠标焦点时，强调鼠标在的那个柱状图
            // emphasis: {
            //   focus: 'series'
            // },
            data: [50, 88, 75, 110, 135, 45, 99],
            //柱状图灰色背景色
            showBackground: true,
          },
        ],
      }
      das.setOption(option)
    </script>
  </body>
</html>
